<template>
	<view class="pad-lr-30">
	<view class="pad-lr-30 pad-tb-34 bgfff display-sb align-items mar-top-20" @click="openstart">
		<view class="display align-items width-80 fontSize-28 col-6">
			<view class="">开始时间：</view>
			<view class="">{{dateSar||'请选择'}}</view>
		</view>
		<image src="/static/img/icon8.png" class="icon_right" mode=""></image>
	</view>
	<view class="pad-lr-30 pad-tb-34 bgfff display-sb align-items mar-top-20" @click="openend">
		<view class="display align-items width-80 fontSize-28 col-6">
			<view class="">结束时间：</view>
			<view class="">{{dateSarx||'请选择'}}</view>
		</view>
		<image src="/static/img/icon8.png" class="icon_right" mode=""></image>
	</view>
	<view class="tibtn text-align-center col-f fontSize-32 radius-10 mar-top-20" @click="sousuo">
		搜索
	</view>
	<view class="mar-top-40 bgfff radius-20">
		<view class="pad-lr-30 pad-tb-30 bord_bottom display-sb align-items-start" v-for="item in list" :key="item.id">
			<view class="width-80">
				<view class="fontSize-3.0">{{item.memo}}</view>
				<view class="mar-top-20 col-9 fontSize-24">{{item.create_time}}</view>
			</view>
			<view class="fontSize-34 fontBold">{{item.money}}</view>
		</view>
	</view>
		<view class="display-ce align-items flex-wrap mar-top-200" v-if="list.length==0">
			<image src="/static/img/icon10.png" class="proudct-item-icon-27" mode=""></image>
			<view class="mar-top-12 col-9 fontSize-30 text-align-center width-100">空空如也~~~</view>
		</view>
	<tm-time-picker
			:showDetail="{
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			}"
			color="#FD6317"
			v-model:show="startdate"
			v-model="dateSAva"
			:defaultValue="dateSAva"
			format="YYYY-MM-DD"
			v-model:model-str="dateSar"
		></tm-time-picker>
		<tm-time-picker
				:showDetail="{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}"
				color="#FD6317"
				v-model:show="enddate"
				v-model="dateSAvax"
				:defaultValue="dateSAvax"
				format="YYYY-MM-DD"
				v-model:model-str="dateSarx"
			></tm-time-picker>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
import {myEarnings} from '../../utils/api'
onLoad(()=>{
	_myEarnings()
})
onReachBottom(()=>{
	if(page.value>1){
		_myEarnings()
	}
})
const page = ref(1)
const list = ref([])
const _myEarnings =()=>{
	myEarnings({page:page.value,limit:10,start_date:dateSar.value,end_date:dateSarx.value}).then(res=>{
		if(res.code==1){
			list.value = list.value.concat(res.data.money_log.data)
			if(res.data.money_log.data.length>0){
				page.value++
			}
		}
	})
}
const sousuo =() =>{
	page.value = 1
	list.value = []
	_myEarnings()
}
const startdate = ref(false)
const dateSAva = ref()
const dateSar = ref()
const openstart = () =>{
	startdate.value = true
}
const enddate = ref(false)
const dateSAvax = ref()
const dateSarx = ref()
const openend = () =>{
	enddate.value = true
}
</script>

<style lang="scss">
@import 'myearnings.scss';
</style>
